<!--
*@Author: QWP
*@Description: 柱状图
*@Date: 2024-09-10 18:41:04
-->
<template>
  <div style="width: 100%; height: 100%;" >
    <div style="width: 100%; height: 100%;" ref="barChart"></div>
    <template v-if="isHaveData == false">
      <a-empty class="u-chart-empty"></a-empty>
    </template>
  </div>
</template>

<script lang='ts' setup>
import { ref, reactive, computed, onMounted, watch, nextTick, onActivated } from 'vue' 
import { storeToRefs } from 'pinia'
import { useRoute, useRouter } from 'vue-router'
import * as echarts from 'echarts';
import { numberC } from '@/util/common';
import { cloneDeep } from 'lodash';

const props = withDefaults(
  defineProps<{
    option: object,
    data: any[],
  }>(),
  {
    option: {},
  }
)

const emits = defineEmits(['click'])

const isHaveData = computed(() => {
  if(Object.keys(props.option).length == 0) {
    return false
  }
  return cloneDeep(props.option).series.some(item => item.data.some(o => numberC(o) != 0))
})

const barChart = ref()

onMounted(() => {
  initChart()
  nextTick(() => initChart())
})

const initChart = () => {
  if(!barChart.value) return
  var myChart = echarts.init(barChart.value);
  var option;

  option = {
    color: ['#1890ff'],
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      top: '8%',
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        data: [],
        axisTick: {
          show: false
        },
      }
    ],
    yAxis: [
      {
        type: 'value',
        splitLine :{
          lineStyle:{
            type:'dashed',
            color: "#ccc",
            dashOffset: 10
          },
        }
      }
    ],
    series: [
      {
        name: 'Direct',
        type: 'bar',
        barWidth: '60%',
        data: [],
      }
    ]
  };

  let propsOption = props.option || {};

  option && myChart.setOption({ ...option, ...propsOption });

  myChart.on('click', function(params) {
    emits('click', params)
  })

  window.addEventListener('resize', () => {
    setTimeout(() => {
      myChart.resize()
    }, 100)
  })
}

watch(() => props.option, (nval, oval) => {
  if(Object.keys(nval || {}).length != 0) {
    initChart()
  }
}, { immediate: true, deep: true })
</script>

<style lang='scss'>
.u-chart-empty {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>